<template>
  <view>
    <image src="/static/icon_1bj.png" class="w100 h100vh absolute" mode=""></image>
    <view class="w100 rowscl rowsm relative">
      <uni-status-bar></uni-status-bar>
      <image src="/static/wd_gr.png" class="w-160 h-160 mt-100 mb-100" mode=""></image>
      <view class="w-690 h-708 br-40 rowscl rowsm" style="background-color: rgba(255, 255, 255, .28);">
        <view class="w-610 h-100 br-20 bgff rows rowsm pl-30 pr-30 mb-32">
          <input type="number" maxlength="11" placeholder="请输入手机号码" placeholder-class="fs-28 col333" v-model="tel">
        </view>
        <view class="w-610 h-100 br-20 bgff rowsb rowsm pl-30 pr-22 mb-32">
          <input type="text" placeholder="请输入验证码" placeholder-class="fs-28 col333" v-model="code">
          <view class="w-158 h-56 rowsc rowsm colfff fs-24 br-20" style="background: linear-gradient(to bottom,#4897FF,#4878FF);" @click="sendCode()">{{!isSend ? '获取验证码' : `${time}秒重试`}}</view>
        </view>
        <view class="w-610 h-100 br-20 bgff rows rowsm pl-30 pr-30 mb-100">
          <input type="text" password placeholder="请输入新密码" placeholder-class="fs-28 col333" v-model="password">
        </view>
        <view class="w-610 h-100 rowsc rowsm colfff fw-b fs-32 br-50 mb-28" style="background: linear-gradient(to bottom,#4897FF,#4878FF);">找回</view>
        <view class="w100 rows rowsm pl-40 pr-40 fs-26" style="flex-direction: row-reverse;color: #4878FF;" @click="$tools.goBack(1)">登录</view>
      </view>
    </view>
    
    <view class="w100 rowscl rowsm fixed" style="bottom: 60rpx;">
      <view class="rows rowsm mb-22" @click="isAgree = !isAgree">
        <image :src="isAgree ? '/static/icon_x.png' : '/static/ixon_c.png'" class="w-28 h-28 mr-10" mode=""></image>
        <view class="fs-24 col888">已阅读并同意 <text style="color: #4878FF;">《用户协议》《隐私协议》</text> </view>
      </view>
      <view class="fs-24 col333">技术支持由山东风正信息科技有限公司提供</view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isAgree:false,
        tel:'',
        code:'',
        time:60,
        timer:'',
        isSend:false,
        password:''
      };
    },
    onLoad() {
      
    },
    methods:{
      sendCode(){
        if(!this.tel) return this.$tools.showtt('请输入手机号')
        this.$tools.axiosFromToken('POST','utils/getVerificationCode',{phone:this.tel},'加载中').then(res => {
          if(res.code != 200) return this.$tools.showtt(res.msg)
          this.isSend = true
          this.timer = setInterval(() => {
            this.time --
            if(this.time <= 0){
              this.isSend = false
              clearInterval(this.timer)
              this.time = 60
            }
          },1000)
        })
      }
    }
  }
</script>

<style lang="scss">

</style>
